<template>
  <div class="page-container-padding">
    <div class="edit-form">
      <div class="page-title">新建系统用户</div>
      <el-form label-width="80px" size="mini">
        <el-form-item label="用户手机">
          <el-input v-model="newObj.phone" placeholder="用户的手机"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input
            v-model="newObj.nickname"
            placeholder="用户的昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input
            v-model="newObj.username"
            placeholder="用户的姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="我司员工">
          <el-select v-model="newObj.is_employee" style="width: 100%">
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="我司开户">
          <el-select v-model="newObj.has_futures_account" style="width: 100%">
            <el-option :value="true" label="是" />
            <el-option :value="false" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户经理">
          <el-input v-model="newObj.service" placeholder="用户的客户经理姓名" />
        </el-form-item>
        <el-form-item label="试用截止">
          <el-date-picker
            v-model="newObj.probation_expire"
            type="date"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="初始密码">
          <el-input v-model="newObj.password" placeholder="用户密码"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button
            type="primary"
            :loading="newObj.createLoading"
            @click="toCreate"
          >
            确定添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { CreateNewUser } from '@/api/adminRuizhi/common'
  export default {
    data() {
      return {
        newObj: {
          phone: '',
          nickname: '',
          username: '',
          company: '',
          job: '',
          service: '',
          is_employee: false,
          has_futures_account: false,
          vip_expire: new Date(),
          probation_expire: new Date(),
          password: '',
          createLoading: false,
        },
      }
    },
    mounted() {},
    methods: {
      toCreate() {
        const bodyData = { ...this.newObj }
        bodyData.vip_expire = datetimeToStr(this.newObj.vip_expire, true, '-')
        bodyData.probation_expire = datetimeToStr(
          this.newObj.probation_expire,
          true,
          '-'
        )
        if (bodyData.username.length < 1) {
          this.$baseMessage('请输入姓名!', 'error')
          return
        }
        this.newObj.createLoading = true
        CreateNewUser(bodyData)
          .then((res) => {
            this.$baseMessag(res.message, 'success')
            this.newObj.createLoading = false
            this.newObj.username = ''
          })
          .catch(() => {
            this.newObj.createLoading = false
          })
      },
    },
  }
</script>
<style scoped lang="scss">
  .edit-form {
    width: 500px;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0 0 10px #eee;
    .page-title {
      color: #ff5f0e;
      font-weight: 700;
      margin-bottom: 16px;
      font-size: 16px;
    }
  }
</style>
